<template>
  <el-dialog
    v-el-drag-dialog
    :title="type === 1 ? '出库瓶号':'入库瓶号'"
    :visible.sync="visible"
    width="800px"
    append-to-body
    @close="reset"
  >
    <div v-if="type === 1" class="item">
      瓶型：{{ bottleInfo.bottleShow }}
    </div>
    <div class="item">
      应扫瓶数：{{ bottleInfo.needScanNum }}瓶
    </div>
    <div class="item box">
      扫瓶编码：
      <div v-for="(item,index) in bottleInfo.bottleCode" :key="index" :class="item.bottleReturnTag===1?'sm-abnormal':''">
        {{ item.bottleCode }}
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      实际扫瓶数：{{ bottleInfo.realScanNum }}瓶
    </div>
  </el-dialog>
</template>

<script>
  import { queryAddCsmDefaultData, queryBottleNum } from '@/api'
  import { parseTime, formatColumnMap } from '@/utils'

  export default {
    name: 'bottle-detail',
    components: {
    },
    props: {
      type: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        parseTime,
        visible: false,
        activeName: 'user',
        csmId: '',
        bottleInfo: {},
        statusMap: {} // 状态枚举
      }
    },
    created() {
      this.getStatusMap()
    },
    mounted() {
      this.$watch('activeName', (val) => {
        if (val !== 'user') {
          console.log(val)
          this.$nextTick(() => {
            this.$refs[val].getData({})
          })
        }
      })
    },
    methods: {
      formatColumnMap,
      async open(temp) {
        return new Promise(async(resolve) => {
          if (temp) {
            this.resolve = resolve
            const res = await queryBottleNum({
              invenBillCode: temp.invenBillCode,
              type: this.type
            })
            this.bottleInfo = res.data
            this.visible = true
          }
        })
      },
      async getStatusMap() {
        const res = await queryAddCsmDefaultData()
        // this.statusMap = res.data.map(l => JSON.parse(l))
        var obj = {}
        for (var value in res.data) {
          // console.log(item)
          if (this.isJsonString(res.data[value])) {
            var item = JSON.parse(res.data[value])
            obj[value] = item
          }
        }
        this.statusMap = obj
      // console.log(this.statusMap, 'data')
      },
      // 判断是否为JSON对象
      isJsonString(str) {
        try {
          if (typeof JSON.parse(str) === 'object') {
            return true
          }
        } catch (e) {
          console.log()
        }
        return false
      },
      tabsClick(val) {
      // console.log(this.activeName)
      // val.getData()
      },
      reset() {
        this.bottleInfo = {}
        this.activeName = 'user'
      }
    }
  }
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 30px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .content {
    margin-bottom: 30px;
  }
}
.box {
  max-height: 300px;
  padding: 20px;
  margin: 20px;
  overflow-y: auto;
  border: 1px solid #39f;
  border-radius: 5px;
  div {
    padding: 5px;
    text-align: center;
    border-bottom: 1px solid #39f;
  }
  .sm-abnormal {
    color: red;
  }
}
.dialog-footer {
  text-align: right;
}
</style>
